<template>
    <div class="wrap">
        <div class="address flex flex-middle" @click="changeAddress">
            <img class="icon" :src="iconUrl" />
            <div class="info-wrap" v-if="addressInfo.contactsName">
                <div>
                    <span class="name">{{addressInfo.contactsName}}</span>
                    <span class="phone">{{addressInfo.phone}}</span>
                </div>
                <div class="add mt15">{{addressInfo.dtlAddr}}</div>
            </div>
            <div v-else class="info-wrap no-info">请选择地址</div>
            <van-icon name="arrow" class="arrows-size"/>
        </div>
        <div class="card">
            <div class="item__info" v-for="item in productList" :key="item.productId">
                <image class="item-img" :src="item.frontPicUrl"/>
                <div class="item__info-order">
                    <div class="item-name van-multi-ellipsis--l2">{{item.productName}}</div>
                    <div class="item-desc">{{item.colorName}} {{item.specsName}}</div>
                    <div class="item-price">
                        <span v-if="item.productType == 1">¥{{item.price}}</span>
                        <span v-else>{{item.price}}积分</span>
                        <div class="option">
                            <div class="option-box sub" @click="changeNumber('-', item)">-</div>
                            <input class="option-box input" v-model="item.buyNums">
                            <div class="option-box add" @click="changeNumber('+', item)">+</div>
                        </div>
                    </div>
                </div>
            </div>
            <textarea class="textare" v-model="remark" placeholder="备注：需和商家协商好"></textarea>
        </div>
        <ul class="card tags">
            <li>
                <div>商品金额</div>
                <div class="tag-value" v-if="productList[0].productType == 1">¥{{totalPrice}}</div>
                <div class="tag-value" v-else>{{totalPrice}}积分</div>
            </li>
            <li>
                <div>商品运费</div>
                <div class="yellow-color">¥{{info.shipFee}}</div>
            </li>
        </ul>
        <div class="footer">
            <div class="footer-text" v-if="productList[0].productType == 1">总金额：<span class="price">{{totalPrice + info.shipFee}}元</span></div>
            <div class="footer-text" v-else>总金额：<span class="price">{{info.shipFee}}元</span> <span class="price price-rihgt">{{totalPrice}}积分</span></div>
            <div class="footer-btn" @click="handlePay">支付</div>
        </div>
    </div>
</template>
<script>
const iconUrl = require("@static/images/errand/icon2.png");
export default {
    data () {
        return {
            info: {},
            remark: '',
            totalPrice: 0,
            addressInfo: {},
            iconUrl,
            productList: []
        };
    },
    methods: {
        changeNumber(type, item) {
            if (type === '-' && item.buyNums > 1) {
                item.buyNums -= 1; 
                this.totalPrice -= item.price;
            } else if (type === '+') {
                if (this.totalPrice + item.price > this.info.points) {
                    wx.showToast({
                        title: '积分不足',
                        icon: 'error',
                        mask: true,
                        duration: 3000
                    });
                    return;
                }
                item.buyNums += 1;
                this.totalPrice += item.price;
            }
        },
        changeAddress() {
            wx.navigateTo({ url: '/pages/my/address/main?isPay=1' });
        },
        handlePay() {
            if (!this.addressInfo.addrId) {
                wx.showToast({
                    title: '请选择地址',
                    icon: 'success',
                    mask: true,
                    duration: 3000
                });
                return;
            }
            this.$api.confirmOrder({
                addrId: this.addressInfo.addrId,
                payMode: 1,
                remark: this.remark,
                products: this.info.productList.map(item => {
                    return {
                        productId: item.productId,
                        colorId: item.colorId,
                        specsId: item.specsId,
                        buyNums: item.buyNums
                    }
                })
            }).then((res) => {
                if (res.code === 0) {
                    const orderId = res.data.orderId
                    this.$api.toPay({
                        orderId,
                        payMode: 1
                    }).then(res => {
                        const payInfo = JSON.parse(res.data.payParams);
                        wx.requestPayment({
                            timeStamp: payInfo.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: payInfo.nonceStr, // 支付签名随机串，不长于 32 位
                            package: payInfo.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                            signType: payInfo.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: payInfo.paySign, // 支付签名
                            success: function (res) {
                                wx.showToast({
                                    title: '支付成功',
                                    icon: 'success',
                                    mask: true,
                                    duration: 3000
                                });
                                wx.navigateTo({ url: "/pages/my/orderdetail/main?orderId=" + orderId });
                            },
                            cancel: function(err){
                                wx.navigateTo({ url: "/pages/my/orderdetail/main?orderId=" + orderId });
                            },
                            fail: function(res){
                                wx.showToast({
                                    title: '支付失败，请重试',
                                    icon: 'none',
                                    mask: true,
                                    duration: 3000
                                });
                            }
                        });
                    });
                }
            })
        }
    },
    onShow() {
        this.remark = '';
        this.addressInfo = this.globalData.addressInfo || {};
        if (this.globalData.shopOrderInfo) {
            this.info = {...this.globalData.shopOrderInfo};
            this.productList = this.globalData.shopOrderInfo.productList;
            let totalPrice = 0;
            this.globalData.shopOrderInfo.productList.forEach((item) => {
                totalPrice += item.price * item.buyNums; 
            })
            this.totalPrice = totalPrice;
        }
 
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    padding: 15px 15px 60px;
    background: $grey-bg;
    min-height: calc(100% - 30px);
    position: relative;
}
.info-wrap {
    flex: 1;
}
.address {
    padding: 20px 15px;
    background: white;
    border-radius: 5px;
    background: #fff;
    .icon {
        width: 25px;
        height: 25px;
        text-align: center;
        margin-right: 15px;
    }
    .name {
        font-size: 15px;
        font-family: PingFang;
        font-weight: bold;
        color: rgba(46, 46, 46, 1);
        margin-right: 15px;
    }
    .phone {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(193, 196, 201, 1);
    }
    .add {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(64, 68, 76, 1);
        line-height: 21px;
        margin-top: 10px;
    }
}
.card {
    padding: 15px;
    background: #fff;
    margin-top: 15px;
    border-radius: 4px;
}
.item__info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.item-img {
    width: 100px;
    height: 100px;
    border-radius: 4px;
}
.item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}
.item__info-order {
    flex: 1;
    height: 100px;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
}
.item-name {
    line-height: 24px;
    font-size: 14px;
}
.item-desc {
    color: $grey-color;
    font-size: 12px;
    padding: 10px 0px;
}
.item-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    color: $yellow-color;
    line-height: 22px;
}
.item-number {
    color: $color-text;
}
.option {
    display: flex;
    align-items: center;
}
.option-box {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 20px;
    color: #666;
    margin-left: 5px;
    background: #F6F6F6;
}
.input {
    width: 40px;
    font-size: 15px;
}
.textare {
    height: 100px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid $grey-border-color;
    background: #f6f6f6;
    margin-top: 15px;
}
.tags {
    li {
        display: flex;
        padding: 10px 15px;
        justify-content: space-between;
        color: $grey-color;
        .yellow-color {
            color: $yellow-color;
        }
    }
}
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    background: #fff;
    border-radius: 2px;
    position: fixed;
    bottom: 10px;
    left: 15px;
    right: 15px;
    
}
.footer-btn {
    width: 120px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: $yellow-color;
    color: #fff;
    font-size: 18px;
}
.price {
    color: $yellow-color;
    font-size: 15px;
}
.footer-text {
    font-size: 12px;
    color: $grey-color;
    padding-left: 15px;
}
.price-rihgt {
    margin-left: 10px;
}
</style>